<template>
  <div class="system-role-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
      <div class="el-form-ls">
        <el-form ref="roleDialogFormRef" :rules="rules" :model="state.ruleForm" size="default" label-width="120px">
          <el-row>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="组合项目名称：">
                <el-input v-model="state.ruleForm.roleName" placeholder="请输入组合项目名称" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <pure-table
          class="pure-table"
          adaptive
          border
          show-overflow-tooltip
          align-whole="center"
          :data="tableData"
          :columns="columns"
        >
          <!--        <template #caoZuo="scope">-->
          <!--          <el-button type="primary" link :icon="EditPen" @click="onOpenEditRole('edit', scope.row)">编辑</el-button>-->
          <!--          <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>-->
          <!--        </template>-->
        </pure-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
// import { Delete, EditPen } from "@element-plus/icons-vue";

// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);

const rules = reactive({
  describe: [{ required: true, message: "请填写疾病名称" }]
});

const columns = [
  {
    label: "序号",
    type: "index",
    width: "70"
  },
  {
    label: "成本价",
    prop: "name"
  },
  {
    label: "操作",
    fixed: "right",
    width: "160",
    slot: "caoZuo"
  }
];
const tableData = [
  {
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Jack",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Dick",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Dick",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Dick",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Dick",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Dick",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Dick",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Dick",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Dick",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Dick",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "Dick",
    address: "No. 189, Grove St, Los Angeles"
  }
];

// 定义变量内容
const roleDialogFormRef = ref<any>();
const state = reactive({
  ruleForm: {
    roleName: "", // 角色名称
    roleSign: "", // 角色标识
    sort: 0, // 排序
    status: true, // 角色状态
    describe: "" // 角色描述
  },
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: ""
  }
});

// 打开弹窗
const openDialog = (type: string, row: any) => {
  if (type === "edit") {
    state.ruleForm = row;
    state.dialog.title = "修改组合项目";
    state.dialog.submitTxt = "确 定";
  } else {
    state.dialog.title = "转移明细项目";
    state.dialog.submitTxt = "转移明细";
    // 清空表单，此项需加表单验证才能使用
    nextTick(() => {
      roleDialogFormRef.value.resetFields();
      // roleDialogFormRef.value.clearValidate();
      // roleDialogFormRef.value.resetField();
    });
  }
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = () => {
  roleDialogFormRef.value!.validate(async valid => {
    if (!valid) return;
    closeDialog();
    emit("refresh");
    // if (state.dialog.type === 'add') { }
  });
};

// 暴露变量
defineExpose({
  openDialog
});
</script>

<style scoped lang="scss">
.system-role-dialog-container {
  .el-form-ls {
    .el-form-new {
      height: 100%;
    }
  }
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
